<template>
   <div style="display: flex;background-color: rgb(221.7, 222.6, 224.4); width: 100%; height: 300px">
      <el-form ref="dataFormRef" :model="dataForm" label-width="120px" style="margin-top: 25px;width: 600px"
         :rules="rules">
         <el-form-item label="省份" prop="province">
            <el-input v-model="dataForm.province" placeholder="请输入省份" />
         </el-form-item>
         <el-form-item label="城市" prop="city">
            <el-input v-model="dataForm.city" placeholder="请输入城市" />
         </el-form-item>
         <el-form-item label="站点名称" prop="stationName">
            <el-input v-model="dataForm.stationName" placeholder="请输入站点名称" />
         </el-form-item>
         <el-form-item label="站点状态">
            <el-select v-model="dataForm.status" placeholder="请选择列车状态">
               <el-option v-for="item in stationStatusOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
            </el-select>
         </el-form-item>
         <el-form-item style="margin-top: 30px;">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="router.push({ name: 'station' })">取消</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>

<script setup>
   import { useRoute,useRouter} from 'vue-router';
   import {ref,reactive,onMounted,getCurrentInstance} from 'vue';
   const route = useRoute();
   const router = useRouter();
   const proxy = getCurrentInstance().proxy;
   const dataFormRef = ref(null);
   // 表单
   const dataForm = reactive({
      stationId: null,
      province: '',
      city: '',
      stationName: '',
      status: 1,
   });
   // 站点状态
const stationStatusOptions = ref([
    {
        label: '禁用',
        value: 0
    },
    {
        label: '启用',
        value: 1
    },{
        label: '维修',
        value: 2
    },
    {
        label: '挂停',
        value: 3
    }
])
   // 表单提交校验
   const rules ={
        province: [
            { required: true, message: '请输入省份', trigger: 'blur' },
        ],
        city: [
            { required: true, message: '请输入城市', trigger: 'blur' },
        ],
        stationName: [
         {
            required: true, message: '请输入站点名称', trigger: 'blur'
        },
      ]
    }
   
    /**
     * 表单提交
     */
    const onSubmit = ()=>{
       // 校验
       dataFormRef.value.validate((valid) => {
          if(!valid){
            proxy.Message.error("请检查输入信息是否正确");
          }else{
             // 确认框
             proxy.Confirm({
                message: '确定提交？',
                okfun: async ()=>{
                  // 提交表单
                  let params = {};
                  Object.assign(params,dataForm);
                  let result = await proxy.Request.request({
                     url: proxy.Api.addOrUpdateStation,
                     params: params
                  });
                  if(!result){
                     return;
                  }
                  proxy.Message.success("提交成功");
                  router.push({name:'station'});
                },
             });
          }
       })
    }

   onMounted(()=>{
      const row = route.query.row?JSON.parse(route.query.row):null;
      if(row){
         dataForm.stationId = row.stationId;
         dataForm.province = row.province;
         dataForm.city = row.city;
         dataForm.stationName = row.stationName;
         dataForm.status = row.status;
      }
   })
</script>

<style scoped>

</style>